import { useState, useEffect } from 'react';
import { Typography } from 'antd';
import BizHeader from '@inbiz/basic/BizHeader';
import BizBody from '@inbiz/basic/BizBody';
import SearchBar from './components/SearchBar';
import NoData from './components/NoData';
import { getApps, getLabels } from './services';
import './style.less';
import type { AppCenterProps, ItemsObj, LabelObject, AppObject } from './types';

const AppCenter = (props: AppCenterProps) => {
  const { viewtype, showSearch, rowCount, inbiz } = props;

  const appInfo = inbiz.appInfo;
  const [searchText, $searchText] = useState('');
  const [apps, $apps] = useState<AppObject[]>([]);
  const [labels, $labels] = useState([]);

  const getdatas = (params) => {
    getApps(params).then((res) => {
      if (res.length > 0) {
        const newArr = res.map((item) => {
          return {
            ...item,
            Items: item.Items.map((ele) => {
              return {
                ...ele,
                ThumbPath: ele.ThumbPath?.replace('{AppId}', ele.Id),
              };
            }),
          };
        });
        $apps(newArr);
      } else if (res.length == 0) {
        $apps([]);
      }
    });
  };
  const onSearch = (e) => {
    $searchText(e);
    getdatas({ keyWords: searchText, skipCount: 0, maxResultCount: 999 });
  };
  const handleView = (Domain: string) => {
    let url = '';
    if (process.env.NODE_ENV == 'development') {
      url = `/${Domain}#/preview`;
    } else {
      url = `/inbiz/web/${Domain}`;
    }
    window.open(url);
  };
  const infoComponent = (offenApps: AppObject[], parentId: string) => {
    const theApps = offenApps.filter((element: AppObject) => {
      return element.TagId == parentId;
    })[0].Items;
    return (
      <>
        <div className="inbiz-AppCenter-infoContainer">
          <div className="appContainer">
            {theApps.map((item: ItemsObj) => {
              return (
                <div
                  className={`${viewtype}`}
                  key={item.Id}
                  onClick={() => handleView(item.Domain)}
                >
                  <div className="contentContainer">
                    {viewtype == 'simple' ? (
                      <div>
                        <img
                          src={
                            item.ThumbPath
                              ? item.ThumbPath
                              : '/inbiz/admin/image/default.png'
                          }
                          onError={(e) => {
                            e.target.onerror = null;
                            e.target.src = `/inbiz/admin/image/default.png`;
                          }}
                        />
                      </div>
                    ) : (
                      <div
                        className="card-img"
                        style={{
                          backgroundImage: `url(${
                            item.ThumbPath
                              ? item.ThumbPath
                              : '/inbiz/admin/image/default.png'
                          })`,
                        }}
                      />
                    )}

                    <div title={item.AppName}>
                      <Typography.Text
                        style={{
                          width: 130,
                          fontSize: 'var(--inbiz-font-size-base)',
                          color: 'var(--inbiz-color-heading)',
                        }}
                        ellipsis={true}
                      >
                        {item.AppName}
                      </Typography.Text>
                    </div>
                  </div>
                </div>
              );
            })}
            {[1, 2, 3, 4, 5, 6, 7, 8].map((ele, index) => {
              return <div key={ele} className={`${viewtype}-rest`} />;
            })}
          </div>
        </div>
        {/* <Divider plain><a onClick={() => clickMore()}>查看更多</a></Divider> */}
      </>
    );
  };
  useEffect(() => {
    getLabels().then((res) => {
      if (res.length) {
        $labels(res);
      }
    });
    getdatas({ keyWords: searchText, skipCount: 0, maxResultCount: 999 });
  }, []);

  return (
    <div>
      <BizHeader {...props} />
      <BizBody {...props}>
        {showSearch && (
          <SearchBar
            onSearch={onSearch}
            searchText={searchText}
            $searchText={$searchText}
          />
        )}
        {/* {showGroup && infoComponent(offenApps)} */}
        {labels.length > 0 && (
          <div>
            {labels
              .filter((ele: LabelObject) => {
                return apps.some((element) => element.TagId == ele.Id);
              })
              .map((item: LabelObject) => {
                return (
                  <div className="inbiz-AppCenter" key={item.Id}>
                    <h3 style={{ color: 'var(--inbiz-color-heading)' }}>
                      <span className="inbiz-AppCenter-blueSquare" />
                      {item.Name}
                    </h3>
                    {infoComponent(apps, item.Id)}
                  </div>
                );
              })}
          </div>
        )}
        {apps.length == 0 && <NoData />}
      </BizBody>
    </div>
  );
};

export default AppCenter;
